<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
   <script type="text/javascript" src="../js/ol.js" ></script>
    <script type="text/javascript">  
        window.onload = function () {  
            //获取热点半径的range标签  
            var blur = document.getElementById('blur');  
            //获取模糊尺寸的range标签  
            var radius = document.getElementById('radius');  
  
            //实例化一个热点图图层  
            var vector = new ol.layer.Heatmap({  
                //数据源  
                source: new ol.source.Vector({  
                    //路径  
                    url: '../data/kml/2012_Earthquakes_Mag5.kml',  
                    //格式化  
                    format: new ol.format.KML({  
                        //Extract styles from the KML. Default is true.  
                        extractStyles:false  
                    })  
                }),  
                //增加热点半径属性  
                radius: parseInt(radius.value, 10),  
                //增加模糊尺寸属性  
                blur:parseInt(blur.value,10)  
            });  
  
            //addfeature  
            //Triggered when a feature is added to the source.  
            //为矢量图层添加一个addfeature事件的监听  
            vector.getSource().on('addfeature', function (event) {  
                //获取要素的name属性  
                var name = event.feature.get('name');  
                //获取要素的震级属性  
                var magnitude = parseFloat(name.substr(2));  
                //设置要素的weight属性  
                event.feature.set('weight',magnitude-5);  
            });  
  
            //初始化瓦片图层  
            var raster = new ol.layer.Tile({  
                source: new ol.source.Stamen({  
                    layer:'toner'  
                })  
            });  
  
            //初始化地图  
            var map = new ol.Map({  
                layers: [raster, vector],  
                target: 'map',  
                view: new ol.View({  
                    center: [0, 0],  
                    zoom:4  
                })  
            });  
  
            //为热点半径添加事件监听，动态设置热点半径  
            radius.addEventListener('input', function () {  
                vector.setRadius(parseInt(radius.value,10));  
            });  
  
            //为模糊尺寸添加事件监听，动态设置模糊尺寸  
            blur.addEventListener('input', function () {  
                vector.setBlur(parseInt(blur.value,10));  
            });  
        };  
    </script>  
</head>  
<body>  
    <div id="menu">  
        <label>热点半径：<input type="range" id="radius" min="1" max="50" step="1" value="10" /></label>    
        <label>模糊尺寸：<input type="range" id="blur" min="1" max="50" step="1" value="15" /></label>    
    </div>  
    <div id="map"></div>  
</body>  
</html>  